<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

<ui:composition>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="../index.xhtml?faces-redirect=true">MeteoCal</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="searchUser.xhtml?faces-redirect=true"><span class="glyphicon glyphicon-search"></span> Search user</a></li>
                    <li><a href="calendar.xhtml?faces-redirect=true"><span class="glyphicon glyphicon-calendar"></span> My Calendar</a></li>
                    <li class="dropdown">
                        <a href="notification.xhtml?faces-redirect=true" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-envelope"></span> Notifications <span class="badge">#{notificationSnippetBean.unreadNotificationNumberByUser}</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <div class="message-container">
                                    <div class="row">
                                        <h:form>
                                            <div class="list-group">
                                                <ui:repeat value="#{notificationSnippetBean.unreadNotificationByUser}" var="notif" varStatus="status">
                                                    <ui:fragment rendered="#{status.index lt 4}">
                                                        <div class="list-group-item">
                                                            <h4 class="list-group-item-heading">
                                                                <h:link type="button" rendered="#{not empty notif.relatedEvent}" outcome="eventDetails.xhtml?faces-redirect=true">
                                                                    #{notif.relatedEvent.title}<f:param name="event" value="#{notif.relatedEvent.id}"/>
                                                                </h:link>
                                                                <h:outputText class="list-group-item-heading" rendered="#{empty notif.relatedEvent}" value="#{notif.title}"/>
                                                            </h4>
                                                            <h:outputText class="list-group-item-text" value="#{notif.message}" converter="notificationSnippetConverter"/>
                                                        </div>
                                                    </ui:fragment>
                                                </ui:repeat>
                                                <ui:fragment rendered="#{empty notificationSnippetBean.unreadNotificationByUser}">
                                                    <a href="#" class="list-group-item">
                                                        <p class="list-group-item-text">No unread notifications.</p>
                                                    </a>
                                                </ui:fragment>
                                            </div>
                                        </h:form>
                                    </div>
                                </div>
                                <div class="navbar-footer">
                                    <div class="navbar-footer-content">
                                        <div class="row">
                                            <div class="col-md-6 col-md-offset-6">
                                                <h:form>
                                                    <!-->Se non metto h:form (h inclusa) attorno al pulsante non funziona!!!!<!-->
                                                    <button type="button" jsf:outcome="notification.xhtml?faces-redirect=true" class="btn btn-default btn-success pull-right">Show all
                                                    </button>
                                                </h:form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>

                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Account
                        <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <div class="navbar-content">
                                    <div class="row">
                                        <div class="col-md-offset-1">
                                            <span>#{userBean.user.username}</span>
                                            <p class="text-muted" jsf:rendered="#{not empty userBean.user.email}">
                                                #{userBean.user.email}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="navbar-footer">
                                    <div class="navbar-footer-content">
                                        <div class="row">
                                            <div class="col-md-offset-4">
                                                <h:form>
                                                    <!-->Se non metto h:form (h inclusa) attorno al pulsante non funziona!!!!<!-->
                                                    <a href="calendar.xhtml?faces-redirect=true" class="btn btn-default btn-success pull-left">My Calendar</a>
                                                    <button type="submit" jsf:action="#{loginBean.logout}" class="col-md-offset-1 btn btn-default btn-danger pull-left">Logout
                                                    </button>
                                                </h:form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</ui:composition>
</html>

